﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        button {
            display: none;
        }

        .no-token .get, .token .use {
            display: inline;
        }
    </style>
</head>
<body class="no-token">
    <a href="index.html">Refresh Page</a>
    <button class="get">Get Token</button>
    <button class="use">Use Token</button>
    <pre class="results"></pre>

    <script>
        var token;

        if (window.location.hash) {
            token = processTokenCallback();
        }

        if (token) {
            document.querySelector("body").className = "token";
        }

        document.querySelector(".get").addEventListener("click", getToken, false);
        document.querySelector(".use").addEventListener("click", useToken, false);

        function show(data) {
            document.querySelector(".results").textContent += JSON.stringify(data, null, 2);
            document.querySelector(".results").textContent += '\r\n';
        }
        function clear() {
            document.querySelector(".results").textContent = "";
        }

        function getToken() {
            var authorizationUrl = 'http://localhost:5000/connect/authorize';
            var client_id = 'js_oauth';
            var redirect_uri = 'http://localhost:28895/index.html';
            var response_type = "token";
            var scope = "api1";
            var state = Date.now() + "" + Math.random();

            localStorage["state"] = state;

            var url =
                authorizationUrl + "?" +
                "client_id=" + encodeURI(client_id) + "&" +
                "redirect_uri=" + encodeURI(redirect_uri) + "&" +
                "response_type=" + encodeURI(response_type) + "&" +
                "scope=" + encodeURI(scope) + "&" +
                "state=" + encodeURI(state);
            window.location = url;
        }

        function processTokenCallback() {
            var hash = window.location.hash.substr(1);
            var result = hash.split('&').reduce(function (result, item) {
                var parts = item.split('=');
                result[parts[0]] = parts[1];
                return result;
            }, {});

            show(result);

            window.history.replaceState({},
                window.document.title,
                window.location.origin + window.location.pathname);

            if (!result.error) {
                if (result.state !== localStorage["state"]) {
                    show("invalid state");
                }
                else {
                    localStorage.removeItem("state");
                    return result.access_token;
                }
            }
        }

        function useToken() {
            clear();

            var xhr = new XMLHttpRequest();
            xhr.onload = function (e) {
                if (xhr.status >= 400) {
                    show({
                        status: xhr.status,
                        statusText: xhr.statusText,
                        wwwAuthenticate: xhr.getResponseHeader("WWW-Authenticate")
                    });
                }
                else {
                    show(JSON.parse(xhr.response));
                }
            };
            xhr.onerror = function (e) {
                console.log(e, xhr);
                show({ error: "unknown http error" });
            };
            xhr.open("GET", "http://localhost:3721/identity", true);
            xhr.setRequestHeader("Authorization", "Bearer " + token);
            xhr.send();
        }

    </script>
</body>
</html>
